<template>
  <div class="banner-card">
    <a rel="noopener noreferrer" @click="handleClick" class="pic">
      <img crossorigin="anonymous" :src="bannerImg" :alt="bannerTitle" />
    </a>
  </div>
</template>

<script>
import { miscApi } from "@/services";
export default {
  name: 'BannerCard',
  props: {
    bannerId: { type: [String, Number], required: true },
    bannerTitle: { type: String, default: '' },
    bannerImg: { type: String, required: true },
    bannerUrl: { type: String, required: true },
  },
  methods: {
    async handleClick(event) {
      const { bannerId, bannerUrl } = this;
      console.log('bannerId: ', bannerId);

      event.stopPropagation();
      await miscApi.traceClickBanner(bannerId);
      // 使用原生a标签跳转避免拦截
      window.open(bannerUrl, "_blank");
    },
  }
}
</script>

<style lang="less" scoped>
.banner-card {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;

  .pic {
    width: 100%;
    height: 100%;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
}
</style>
